<template>
    <div style="width: 100%;">
      <div style="display: flex;flex-direction: column;justify-items: center;width: 100%;height: 100%;">
          <div class="aaaa" v-for="item in recommandWord" style="display: flex;flex: 1; flex-direction: column;padding: 20px 30px ;cursor: pointer;border-bottom: 1px solid #ece6e6" @click="$router.push('/unKnowWord')">
<!--            文章标题-->
              <div style="flex: 1;color: rgba(0,0,0,0.96);font-size: 18px; " >
                 <el-tag>{{item.unit}}</el-tag>&nbsp
                <span>{{item.word}}</span>
              </div>
<!--              文章简介-->
              <div style="flex: 3;color: #999aaa;font-size: 14px;margin-top: 18px">
                        <span>{{ item.mean}}</span> &nbsp;<span v-if="item.mean2">、{{ item.mean2}}</span><span v-if="item.mean3">、{{ item.mean3}}</span>
              </div>

<!--              文章浏览量以及其他信息-->
              <div style="flex: 1;display: flex;align-items: center;color: #999aaa;font-size: 13px;margin-top: 20px">
                        <span style="display: block;flex: 3">
                         <el-tag type="success"> <i class="el-icon-edit"></i> {{item.gride}} </el-tag>&nbsp
                         <el-tag type="info">  <span><i class="el-icon-position"></i> {{item.part}}</span></el-tag>
                        </span>
                  <div style=" ">
                      <span style="margin-right: 10px"> <i class="el-icon-circle-close"></i> {{item.know}}</span>
                      <sapn > <i class="el-icon-timer"></i> {{item.createTime}}</sapn>
                  </div>
              </div>
          </div>
      </div>
    </diV>
</template>

<script>
    export default {

        data(){
            return{
              recommandWord:[],
              items: [
                { type: '', label: '标签一' },
                { type: 'success', label: '标签二' },
                { type: 'info', label: '标签三' },
                { type: 'danger', label: '标签四' },
                { type: 'warning', label: '标签五' }
              ]
            }
        },
        created() {
            this.load()
            },
        methods:{
          load(){
            const i = this.i;
            this.request.get("/word/unWord/"+ 0).then(res => {
              console.log(res)
              this.recommandWord = res.data
            })
          },
        }
    }
</script>

<style scoped>
.aaaa:hover{
    background-color: rgb(240,240,240);
}
</style>